define([
    'text!templates/map/controls/objectCounter.html',
], function (HTMLTemplate) {

    var view = Backbone.View.extend({
        el: $("#main-content"),
        render: function () {

            var template = Handlebars.compile(HTMLTemplate);
            var html = template();
            this.$el.html(html);

            this.addHandlers();
        },
        addHandlers: function () {
            this.$el.find("ul").on("mouseover", "li", function () {
                $("#projectmap").trigger("showLayerByType", [$(this).attr("data-type"), $(this).attr("data-code")]);
            });

            this.$el.find("ul").on("mouseout", "li", function () {
                $("#projectmap").trigger("clearAuxLayer");
            });

        },
        updateObjectCount: function (worklayer) {

            var dicNodes = {};
            var dicLinks = {};
            // count
            worklayer.eachLayer(function (e) {
                var layer = e.layer || e.target || e;
                if (layer.options.className && layer.options.className != "") {
                    var dic;
                    if (layer instanceof L.Marker) {
                        dic = dicNodes;
                    }
                    else {
                        dic = dicLinks;
                    }

                    if (!dic[layer.options.className])
                        dic[layer.options.className] = 0;
                    dic[layer.options.className]++;

                }

            });

            //apply
            this.$el.find("li").hide();
            var $li;
            for (var key in dicNodes) {
                $li = this.$el.find("li[data-type='node'][data-code='" + key + "']");
                if ($li.length > 0) {
                    $li.find("span").html(dicNodes[key]);
                    $li.css("display", "inline");
                }
            }
            for (var key in dicLinks) {
                $li = this.$el.find("li[data-type='link']li[data-code='" + key + "']");
                if ($li.length > 0) {
                    $li.find("span").html(dicLinks[key]);
                    $li.css("display", "inline");
                }
            }


        }
    });
    return view;
});